//动态变化导航器

import React, { Component } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import AntDesign from 'react-native-vector-icons/AntDesign'

import Hot from '../pages/tabs/Hot'
import Trending from '../pages/tabs/Trending'
import Collect from '../pages/tabs/Collect'
import My from '../pages/tabs/My' 

const Tab = createBottomTabNavigator();

const color = {
  active:'#b10000',
  unActive:'#999'
}
//1配置文件的形式  
//2用Tab.Screen组件配置, XXX.navigationOptions.XX 修改属性
//可以从服务器动态的获取来控制显示和隐藏,网络请求需要在react组件内使用
const navs = [
  {
    name:'hot',
    component:Hot,
    label:'最热',
    iconName:'whatshot',
    iconType:1,
    isShow:true,
  },
  {
    name:'trending',
    component:Trending,
    label:'趋势',
    iconName:'trending-up',
    iconType:1,
    isShow:true,
  },
  {
    name:'collect',
    component:Collect,
    label:'收藏',
    iconName:'collections',
    iconType:1,
    isShow:false,
  },
  {
    name:'my',
    component:My,
    label:'我的',
    iconName:'user',
    iconType:2,
    isShow:true,
  },
]

export default function TabPage() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: color.active,
        inactiveTintColor: color.unActive
      }}
    >
      {
        navs.map((nav,index) => {
          if(nav.isShow){
            return (
              <Tab.Screen 
                name={nav.name} 
                component={nav.component} 
                options={{
                  tabBarLabel:nav.label,
                  tabBarIcon:({ color,focused })=>{
                    if(!nav.iconType || nav.iconType == 1){
                      return (
                        <MaterialIcons
                          name={nav.iconName}
                          size={26}
                          style={{
                            color:color
                          }}
                        />
                      )
                      
                    }else{
                      return (
                        <AntDesign
                          name={nav.iconName}
                          size={26}
                          style={{
                            color:color
                          }}
                        />
                      )
                    }
                  }
                }}  
              />
            )
          }
          
          
        })
      }
      {/* <Tab.Screen 
        name="hot" 
        component={Hot} 
        options={{
          tabBarLabel:'最热',
          tabBarIcon:({ color,focused })=>(
            <MaterialIcons
              name={'whatshot'}
              size={26}
              style={{
                color:color
              }}
            />
          )
        }}  
      />
      <Tab.Screen 
        name="trending" 
        component={Trending} 
        options={{
          tabBarLabel:'趋势',
          tabBarIcon:({ color,focused })=>(
            <MaterialIcons
              name={'trending-up'}
              size={26}
              style={{
                color:color
              }}
            />
          )
        }}
      />
      <Tab.Screen 
        name="collect" 
        component={Collect} 
        options={{
          tabBarLabel:'收藏',
          tabBarIcon:({ color,focused })=>(
            <MaterialIcons
              name={'collections'}
              size={26}
              style={{
                color:color
              }}
            />
          )
        }}
      />
      <Tab.Screen 
        name="my" 
        component={My} 
        options={{
          tabBarLabel:'我的',
          tabBarIcon:({ color,focused })=>(
            <AntDesign
              name={'user'}
              size={26}
              style={{
                color:color
              }}
            />
          )
        }}
      /> */}
    </Tab.Navigator>
  );
}
